<template>
  <div>
    <!-- 表单区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航 -->
        <my-breadcrumb></my-breadcrumb>
      </div>
      <el-form ref="form" label-width="80px">
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <!-- 对<el-radio来说，label决定用户选中的值
           如果值为null就相当于没选
       -->
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 添加自定义事件的监听
          在组件上使用v-model,
          <com-a v-model="msg"></com-a>
          相当于：
          <com-a :value="msg" @input=(val)=>{this.msg = val}></com-a>
          做了两件事：
          （1）给组件传了一个名为value的属性
           (2) 在组件监听了input事件，并在回调中修改v-model中的绑定的数据
        -->
        <!-- <my-channel @input="hInput"></my-channel> -->
        <my-channel v-model="form.channle_id"></my-channel>
        <el-form-item label="日期">
          <!--
       value-format: 格式化选中的日期
       type: daterange： 表示一个时间区间. 是组件date-picker中的
             type属性的值
     -->
          <el-date-picker
            v-model="form.dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-button type="primary" @click="hQuery" :loading="isLoading"
          >查询</el-button
        >
      </el-form>
    </el-card>

    <!--表格区域  -->
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>查询到{{ total_count }}结果</span>
      </div>
      <!-- table -->
      <!-- :data 用来指定数据源 也就是表格中的数据从哪里来
      v-loading: element-ui中提供的自定义指令。
  -->
      <el-table v-loading="isLoading" :data="articles" style="width: 100%">
        <!-- el-table-column表示表格中的列
           prop 用来指定数据来源：这一列的数据是对象中的哪个字段
           lebel 这一列对应的表头
           width 每列的宽度 如果有一列没有设宽 则会自适应 也就是自动分配剩余宽

          template：只是一个逻辑上的容器，它并不会产生真实的dom
          scope: 用来获取范围内的数据.  scope.row表示当前行的数据
       -->
        <el-table-column label="封面" width="180">
          <template slot-scope="scope">
            <!-- slot-scope: 作用域插槽 写法来自定义模板  获取当前行的数据-->
            <!-- scope.row：表示当前行 -->
            <!-- 自己去定义要如何显示这个内容,比如行内的数据cover的图片 -->
            <!-- <el-image :src="scope.row.cover.images[0]" /> -->
            <el-image
              style="width: 150px; height: 100px"
              :src="scope.row.cover.images[0]"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180">
        </el-table-column>
        <el-table-column label="状态">
          <!-- 自定义模板，先删除prop，再写slot-scope="scope" -->
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | fStatusType">{{ scope.row.status | fStatusText }}</el-tag>
            <!-- <el-tag v-if="scope.row.status == 0">草稿</el-tag>
         <el-tag v-else-if="scope.row.status == 1" type="success">待审核</el-tag>
         <el-tag v-else-if="scope.row.status == 2" type="info">审核通过</el-tag>
         <el-tag v-else-if="scope.row.status == 3" type="warning">审核失败</el-tag>
         <el-tag v-else-if="scope.row.status == 4" type="danger">已删除</el-tag>
         <el-tag v-else type="danger">unknow</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
        <el-table-column label="操作 ">
          <template slot-scope="scope">
            <!--
           scope.$index: 就是当前的行号
           scope.row： 就是当前行的数据
           circle属性可以让图标变圆，默认是false ，设置了的话就相当于true
         -->
            <el-button
              size="mini"
              :circle="true"
              icon="el-icon-edit"
              @click="hEdit(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              circle
              type="danger"
              icon="el-icon-delete"
              @click="hDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页
        total: 一共有多少条数据
        page-size: 一页显示几条数据 ，如果不设置这个属性也会默认是10条
        current-change:点击页码时，它会触发
    -->
      <el-pagination
        :disabled="isLoading"
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="hCurrentChange"
        :total="total_count"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 1、引入
// import MyChannel from '../../components/MyChannel.vue'
// import MyBreadcrumb from '../../components/MyBreadcrumb.vue'
// 2.注册 成组件
// 3。使用 烤串写法
export default {
  name: 'articles',
  components: {
    // MyChannel: MyChannel
    // MyBreadcrumb
  },
  data () {
    return {
      form: {
        channel_id: null, // 频道id
        status: null, // 状态
        dateRange: '' // 当前时间的区间
      },
      page: 1, // 当前查询的页码
      total_count: 0, // 查询到的数据总数量
      isLoading: false,
      // 表格数据来源 是一个数组 每条数据都是一个对象（键值对），每个对象对应这表格中的一行
      articles: [] // 表格数据，返回给上面的:data
    }
  },
  created () {
    // 发请求 这个数据是从methods里面来
    this.loadArticles()
  },
  // 过滤器
  // 0 --> 草稿 有个映射关系
  // 1 --> 待审核
  filters: {
    fStatusText (status) {
      // status是要过滤的数据
      // 这里是一个对象，属性名是数值，由此对应映射关系
      // 策略模式：23种设计模式种的一种
      const texts = {
        0: '草稿',
        1: '待审核',
        2: '审核通过',
        3: '审核失败',
        4: '已删除'
      }
      // 通过[]来取对象的属性值
      return texts[status]
    },
    fStatusType (status) {
      // status是要过滤的数据
      // 这里是一个对象，属性名是数值，由此对应映射关系
      const texts = {
        0: 'info',
        1: 'normal',
        2: 'success',
        3: 'warning',
        4: 'danger'
      }
      // 通过[]来取对象的属性值
      return texts[status]
    }
  },
  methods: {
    // hInput (channelId) {
    //   console.log('父组件收到了子组件传递的数据', channelId)
    //   this.form.channel_id = channelId
    // },
    hQuery () {
      this.loadArticles()
    },
    // 专门写一个函数，来收集用户的查询条件
    buildParams () {
      // status        否 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除，不传为全部
      // channel_id    否  频道 id，不传为全部
      // begin_pubdate 否  2019-01-01 起始时间，不传就不限定开始时间
      // end_pubdate   否  2019-01-02 截止时间，不传就不限定结束时间
      // page          否        页数，默认是 1
      // per_page      否        每页数量，默认每页 10 条
      const { dateRange, status } = this.form
      // 在传递参数给后端时，channel_id='' 和channel_id=null是两个完全不同的概念！
      // 如果一个参数是null,则 axios就不会向后端传参了
      const channelId =
        this.form.channel_id === '' ? null : this.form.channel_id
      const params = { page: this.page, status: status, channel_id: channelId }

      if (dateRange) {
        params.begin_pubdate = dateRange[0]
        params.end_pubdate = dateRange[1]
      }
      // 返回一个条件对象
      return params
    },
    async loadArticles () {
      // 1、获取查询条件
      const params = this.buildParams()
      this.isLoading = true // 加载中
      try {
        // 2、带参数发请求
        const res = await this.$axios({
          method: 'get',
          url: '/mp/v1_0/articles',
          // get请求，要使用params传值
          // 如果某个参数的值是null，则axios会忽略这个参数，就相当于没选这个参数
          params: params
        })
        console.log(res)
        // 3、保存数据到本地也就是数据项
        // 拿到ajax的返回数据赋值给articles的空数组
        this.articles = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
        // 发生错误，清空数据
        this.articles = []
      }
      this.isLoading = false // 加载结束
    },
    hCurrentChange (curPage) {
      // curPage是自动传入的，为当前页码
      console.log('现在要显示', curPage)
      this.page = curPage // 更新了查询的页面
      this.loadArticles() // 重新铺设页面
    },
    // 用户点击了编辑按钮
    hEdit (row) {
      const id = row.id.toString()
      // 路由跳转
      this.$router.push({
        name: 'edit',
        params: {
          id: id
        }
      })
      // console.log(index, row)
    },
    // 用户要删除数据
    async doDelete (id) {
      try {
        const res = await this.$axios({
          methods: 'DELETE',
          url: '/mp/v1_0/articles/' + id
        })
        console.log(res)
        // 删除成功
        this.$message.success('删除成功')
        this.loadArticles() // 重铺页面
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    hDelete (row) {
      this.$confirm('你真的要删除吗')
        .then(() => {
          const id = row.id.toString()
          console.log('当前要删除的文章编号是', id)
          this.doDelete(id)
        })
        .catch(() => {
          console.log('取消了删除')
        })
    }
  }
}
</script>
